<template>
    <div class="app-container">
        <!-- 招投标中心 -->
        <div class="homes">
            <div class="tendering">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">招投标中心</span>
                </div>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#ffffff" text-color="rgb(204, 208, 209)" active-text-color="#89dbef">
                    <el-menu-item index="1">询报价</el-menu-item>
                    <el-menu-item index="2">招投标</el-menu-item>
                    <el-menu-item index="3">询竞价</el-menu-item>
                </el-menu>
                <!-- 询报价表格 -->
                <div v-if="currentPage === 'quotation'">
                    <el-table :data="tableData1" height="210" stripe style="width: 100%;">
                        <el-table-column prop="" label="询价单号" width="160">
                        </el-table-column>
                        <el-table-column prop="" label="客户" width="160">
                        </el-table-column>
                        <el-table-column prop="" label="报价开始时间" width="180">
                        </el-table-column>
                        <el-table-column prop="" label="报价截至时间" width="180">
                        </el-table-column>
                        <el-table-column prop="" label="状态" width="170">

                        </el-table-column>
                    </el-table>
                </div>
                <!-- 招投标表格 -->
                <div v-if="currentPage === 'bid'">
                    <el-table :data="tableData" height="210" stripe style="width: 100%">
                        <el-table-column prop="i_number" label="招标单号" width="180">
                        </el-table-column>
                        <el-table-column prop="i_unit" label="客户" width="180">
                        </el-table-column>
                        <el-table-column prop="get_start_time" label="投标开始时间" width="180">
                        </el-table-column>
                        <el-table-column prop="get_end_time" label="投标截至时间" width="180">
                        </el-table-column>
                        <el-table-column prop="project_state" label="状态" width="140">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.project_state === 1">立项中</el-tag>
                                <el-tag type="success" v-if="scope.row.project_state === 2">招标</el-tag>
                                <el-tag type="info" v-if="scope.row.project_state === 3">投标中</el-tag>
                                <el-tag type="warning" v-if="scope.row.project_state === 4">开标中</el-tag>
                                <el-tag type="danger" v-if="scope.row.project_state === 5">评估中</el-tag>
                                <el-tag type="danger" v-if="scope.row.project_state === 6">定标中</el-tag>
                                <el-tag type="info" v-if="scope.row.project_state === 7">废标</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 询竞价表格 -->
                <div v-if="currentPage === 'bidding'">
                    <el-table :data="tableData" height="210" stripe style="width: 100%">
                        <el-table-column prop="date" label="竞价单号" width="160">
                        </el-table-column>
                        <el-table-column prop="name" label="客户" width="160">
                        </el-table-column>
                        <el-table-column prop="address" label="竞价开始时间" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="竞价截至时间" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="状态" width="170">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 我的资料 -->
            <div class="tenderingone">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">我的资料</span>
                </div>
                <div class="profile">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar :size="60" :src="circleUrl"></el-avatar> <!-- 只显示第一个头像 -->
                        </div>
                        <div class="info">
                            <span class="company">{{ personInfo.hName }}</span>
                            <span class="contact">联系人: {{ personInfo.hJuridical }}&nbsp;&nbsp;&nbsp;联系电话: {{
                                personInfo.hSignPhone
                                }}</span>
                        </div>
                        <el-button type="info" class="info-button" plain>详情</el-button>

                    </div>
                </div>
            </div>
        </div>
        <!-- 流程中心 -->
        <div class="homes">
            <div class="tendering">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">流程中心</span>
                </div>
                <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" @select="handleSelectes"
                    background-color="#ffffff" text-color="rgb(204, 208, 209)" active-text-color="#89dbef">
                    <el-menu-item index="4">待办事宜</el-menu-item>
                    <el-menu-item index="5">已办事宜</el-menu-item>
                </el-menu>
                <!-- 待办事宜 -->
                <div v-if="currentPages === 'todo'">
                    <el-table :data="todoData" height="210" stripe style="width: 100%">
                        <el-table-column prop="date" label="标题" width="560">
                        </el-table-column>
                        <el-table-column prop="name" label="创建人">
                        </el-table-column>
                        <el-table-column prop="address" label="接收日期">
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 已办事宜 -->
                <div v-if="currentPages === 'already'">
                    <el-table :data="alreadyData" height="210" stripe style="width: 100%">
                        <el-table-column prop="date" label="标题" width="560">
                        </el-table-column>
                        <el-table-column prop="name" label="创建人">
                        </el-table-column>
                        <el-table-column prop="address" label="接收日期">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 通知中心 -->
            <div class="tenderingone">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">通知中心</span>
                </div>
                <!-- 通知公告表格 -->
                <el-table :data="tablenotice" height="210" stripe style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="notice_title" label="标题" width="370">
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建日期">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 我的采购执行 -->
        <div class="homes">
            <div class="tendering">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">我的采购执行</span>
                </div>
                <el-menu :default-active="activeIndex3" class="el-menu-demo" mode="horizontal" @select="handleSelectos"
                    background-color="#ffffff" text-color="rgb(204, 208, 209)" active-text-color="#89dbef">
                    <el-menu-item index="6">我的订单</el-menu-item>
                    <el-menu-item index="7">我的合同</el-menu-item>
                </el-menu>
                <!-- 我的订单表格 -->
                <div v-if="currentPageos === 'order'">
                    <el-table :data="tableinformation" height="210" stripe style="width: 100%">
                        <el-table-column prop="i_number" label="订单编号">
                        </el-table-column>
                        <el-table-column prop="h_name" label="公司">
                        </el-table-column>
                        <el-table-column prop="v_person" label="采购员">
                        </el-table-column>
                        <el-table-column prop="v_count" label="需求总数量">
                        </el-table-column>
                        <el-table-column prop="gs_res_date" label="发布时间">
                        </el-table-column>
                        <el-table-column prop="gs_state" label="状态">
                            <template slot-scope="scope">
                                {{ scope.row.gs_state === 0 ? '已发布' : '未发布' }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 我的合同表格 -->
                <div v-if="currentPageos === 'contract'">
                    <el-table :data="tablecontract" height="210" stripe style="width: 100%">
                        <el-table-column prop="e_hcode" label="合同编号">
                        </el-table-column>
                        <el-table-column prop="e_hname" label="合同名称">
                        </el-table-column>
                        <el-table-column prop="h_name" label="公司">
                        </el-table-column>
                        <el-table-column prop="e_amount" label="含税总价">
                        </el-table-column>
                        <el-table-column prop="create_time" label="签订日期">
                        </el-table-column>
                        <el-table-column prop="e_status" label="状态">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="tenderingone">
                <div class="icon-text-wrapper">
                    <img src="../assets/images/zbq.png" alt="图标" style="width: 20px; height: 20px;">
                    <span class="font">投标结果</span>
                </div>
                <el-menu :default-active="isBidder" class="el-menu-demo" mode="horizontal"
                    @select="handleSelectosBidder" background-color="#ffffff" text-color="rgb(204, 208, 209)"
                    active-text-color="#89dbef">
                    <el-menu-item index="10">中标</el-menu-item>
                    <el-menu-item index="11">未中标</el-menu-item>
                </el-menu>
                <el-table v-show="isBidder === '10'" :data="bidingResultTable" height="210" stripe
                    style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="iNumber" label="中标编号">
                    </el-table-column>
                    <!-- 为什么是hName,业务后端获得招标名后直接给的hName -->
                    <el-table-column prop="hName" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="resultTitle" label="标题">
                    </el-table-column>
                    <!-- <el-table-column prop="name" label="状态" width="110">
                    </el-table-column> -->
                </el-table>


                <el-table v-show="isBidder === '11'" :data="bidingNoResultTable" height="210" stripe
                    style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="iNumber" label="投标编号">
                    </el-table-column>
                    <!-- 为什么是hName,业务后端获得招标名后直接给的hName -->
                    <el-table-column prop="finalScore" label="报价">
                    </el-table-column>
                    <el-table-column prop="ranking" label="排名">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script scoped>
import { tenderlist, informationlist, contractlist } from "@/api/expert/tender.js"
import { getBidingResult, getPersonInfo, getNoBidingResult } from '@/api/system/purchase.js'
import { tzNotice } from "@/api/system/notice.js"
export default {
    data() {
        return {
            isBidder: "10",
            personInfo: {},//个人信息
            bidingResultTable: [],
            bidingNoResultTable: [],//未中标
            tableData1: [],
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            sizeList: ["large", "medium", "small"],
            companyName: '腾讯科技(深圳)有限公司',
            contacts: '姜超',
            number: '15026579654',
            activeIndex2: '1', // 默认选中的菜单项
            activeIndex1: '4',
            activeIndex3: '6',
            currentPage: 'quotation', // 当前页面
            currentPages: 'todo',
            currentPageos: 'order',
            tableData: [], //招投标数据
            tableinformation: [],//我的资料数据
            tablecontract: [],//我的合同数据
            tablenotice: [],
            todoData: [{
                date: '调查表-20221225-姜超',
                name: '姜超',
                address: '2022-12-25',
            }],
            alreadyData: [{
                date: '采购发票流程-腾讯科技',
                name: '腾讯科技',
                address: '2022-12-29',
            },
            {
                date: '调查表-20221229-李零',
                name: '李零',
                address: '2022-12-29',
            },
            {
                date: '调查表-20221226-系统管理员',
                name: '系统管理员',
                address: '2022-12-26',
            },
            {
                date: '调查表-20221225-姜超',
                name: '姜超',
                address: '2022-12-25',
            }
            ]

        }
    },
    mounted() {
        if (this.$store.getters.flags) {
            this.$store.getters.flags = false;
            location.reload();
        }
        this.getPersonInfo();
        this.bidingResult();
        this.fetchNotifications();  // 在组件挂载后查询通知    
        this.Selectinformation();
    },
    created() {
        // 监听页面变化
        window.addEventListener("resize", function () {
            setTimeout(() => that.handleResize(), 200)
        });
        // 监听侧边菜单伸缩
        let that = this
        that.unWatch = that.$watch(
            // 获取全局变量，此变量控制菜单的展开与折叠
            // 当点击菜单栏按钮实现伸缩时此变量会发生变化
            () => that.$store.state.app.sidebar.opened,
            // 设置定时器是因为element-ui的菜单组件有300毫秒的动画
            () => setTimeout(() => that.handleResize(), 200)
        );
    },
    methods: {
        handleSelectosBidder(key, keyPath) {
            this.isBidder = key;
            if (key === '10') {
                this.bidingResult();
            } else if (key === '11') {
                this.getNoBidingResult();
            }
        },
        //获得未中标结果
        getNoBidingResult() {
            getNoBidingResult().then(res => {
                this.bidingNoResultTable = res.data;
            })
        },
        //获得个人信息
        getPersonInfo() {
            getPersonInfo().then((res) => {
                this.personInfo = res.data;
            })
        },
        //获得中标结果
        bidingResult() {
            getBidingResult().then(res => {
                this.bidingResultTable = res.data;
            })
        },
        handleResize() {
            let doc = document.getElementsByClassName("app-container");
            let currentWidth = doc[0].clientWidth;
            if (this.$store.state.app.sidebar.opened == true) {
                console.log("进入");
                // 计算新的缩放比例，例如缩小250px 
                let scale = (currentWidth - 150) / currentWidth;
                // 应用缩放变换  
                doc[0].style.transform = `scale(${scale})`;
                doc[0].style.transformOrigin = "top left"; // 设置缩放原点
            } else {
                // 恢复到原始宽度  
                doc[0].style.width = currentWidth + "px"; // 恢复原始宽度  
                doc[0].style.transform = "scale(1)"; // 恢复缩放  
            }
        },
        async fetchNotifications() {
            tzNotice().then(response => {
                this.tablenotice = response;
            }).catch(error => {
                console.error("获取数据失败", error);
            })
        },
        handleSelectos(index) {
            if (index === '6') {
                this.currentPageos = 'order'
                this.Selectinformation();
            }
            if (index === '7') {
                this.currentPageos = 'contract'
                this.Selectcontract();
            }
        },
        handleSelectes(index) {
            if (index === '4') {
                this.currentPages = 'todo'
            }
            if (index === '5') {
                this.currentPages = 'already'
            }
        },
        handleSelect(index) {
            this.activeIndex2 = index; // 更新激活的菜单项
            if (index === '1') { // 如果点击的是询报价
                this.currentPage = 'quotation'; // 更改为询报价页面

            }
            if (index === '2') {
                this.currentPage = 'bid';
                this.Selecttenders();
            }
            if (index === '3') {
                this.currentPage = 'bidding';
            }
        },
        Selecttenders() {
            tenderlist().then(response => {
                this.tableData = response;
                console.log('打印', response);
            }).catch(error => {
                console.error("获取数据失败", error);
            })
        },
        Selectinformation() {
            informationlist().then(response => {
                this.tableinformation = response;
            }).catch(error => {
                console.error("获取数据失败", error);
            })
        },
        Selectcontract() {
            contractlist().then(response => {
                this.tablecontract = response;
                console.log('打印', response);
            }).catch(error => {
                console.error("获取数据失败", error);
            })
        }
    }
}
</script>
<style scoped>
.custom-divider {
    width: 97%;
}

.info-button {
    margin-left: 75px;
    margin-bottom: 15px;
}

.demo-basic--circle {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
}

.contact {
    display: block;
    /* 将联系人信息设置为块级元素，以便换行显示 */
    margin-top: 5px;
    /* 给联系人信息添加上边距，增加上下间距 */
    font-size: 12px;
    /* 可以根据需要自定义字体大小 */
    color: rgb(204, 208, 209);
    /* 字体颜色 */
    white-space: nowrap;
    /* 防止文本换行 */
}

.block {
    margin-right: 10px;
    /* 头像与公司名称和联系人之间的水平间距 */
}

.company {
    /* 给公司名称添加左边距，以便与头像有间隔 */
    font-size: 14px;
    /* 可以根据需要自定义字体大小 */
    color: #333;
    /* 字体颜色 */
    font-weight: bold;
    /* 使文本加粗 */

    margin-bottom: 8px;
    /* 公司名称与联系人之间的间距 */
    white-space: nowrap;
    /* 防止文本换行 */
}

.info {
    display: flex;
    flex-direction: column;
    /* 使公司名称和联系人上下排列 */
}

.profile {
    margin-top: 25px;
    margin-left: 20px;
}

.el-menu-demo .el-menu-item:hover {
    background-color: transparent !important;
    /* 将悬停时的背景颜色设置为透明 */
}

.el-menu-demo .el-menu-item.is-active {
    background-color: #ffffff !important;
    /* 确保激活项的背景颜色为白色 */
}

.icon-text-wrapper {
    display: flex;
    /* 启用 Flexbox */
    align-items: center;
    /* 垂直居中对齐图标和文本 */
    margin-top: 7px;
    margin-left: 7px;
}

.font {
    font-size: 12px;
    margin-left: 10px;
}

.homes {
    padding: 0;
    display: flex;
    /* 将父容器设为 Flexbox */
    align-items: flex-start;
    /* 上对齐 */
    gap: 10px;
    /* 设置子元素之间的间距 */
}

.home {
    background-color: rgb(241, 241, 241);
    /* 背景颜色示例 */
}

.tenderingone {
    width: 45%;
    /* 设置宽度为80% */
    max-width: 550px;
    /* 最大宽度为600px */
    min-height: 300px;
    /* 最小高度为300px */
    background-color: white;
    /* 盒子的背景颜色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 盒子阴影 */
    border-radius: 2px;
    /* 盒子圆角 */
    margin-top: 2px;
    margin-left: 2px;
    box-sizing: border-box;
    /* 包括内边距和边框在内 */
    transition: all 0.3s ease;
    /* 添加过渡效果 */
}

.tendering {

    width: 80%;
    /* 设置宽度为80% */
    max-width: 850px;
    /* 最大宽度为600px */
    min-height: 300px;
    /* 最小高度为300px */
    background-color: white;
    /* 盒子的背景颜色 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 盒子阴影 */
    border-radius: 2px;
    /* 盒子圆角 */
    margin-top: 2px;
    margin-left: 2px;
    box-sizing: border-box;
    /* 包括内边距和边框在内 */
    transition: all 0.3s ease;
    /* 添加过渡效果 */
}
</style>